<template>
  <div class="code-wrap">
    <bf-card :no-hover="cardHover" :noElevate="cardElevate">
      <div class="code-wrap-ui-content">
        <slot name="source"></slot>
      </div>
      <div class="code-wrap-des-content-title">
        <span>
          <slot name="title"></slot>
        </span>
      </div>
      <div class="code-wrap-des-content doc-article">
        <slot name="description"></slot>
      </div>
      <div class="code-wrap-code-button">
        <bf-tooltip placement="top" content="复制代码">
          <img class="copySvg" src="../assets/copy.svg" alt @click="copyCodeClick" />
        </bf-tooltip>&nbsp;&nbsp;
        <bf-tooltip placement="top" :content="openedCode ? '隐藏代码' : '显示代码'">
          <img
            class="copySvg"
            v-show="openedCode"
            src="../assets/display.svg"
            @click="openedCodeClick"
          />
          <img
            class="copySvg"
            v-show="!openedCode"
            src="../assets/hidden.svg"
            @click="openedCodeClick"
          />
        </bf-tooltip>
      </div>
      <slideTransition>
        <div v-show="openedCode" class="code-wrap-code-content" ref="codeContent">
          <slot name="highlight"></slot>
        </div>
      </slideTransition>
    </bf-card>
  </div>
</template>

<script>
import slideTransition from "/src/components/base/slide-transition.vue";
export default {
  name: "CodeWrap",
  props: {
    title: String,
  },
  data() {
    return {
      openedCode: false,
    };
  },
  computed: {
    iconCodeClass() {
      if (this.openedCode) {
        return "code-open";
      }
      return "code-close";
    },
    cardHover() {
      return (
        this.$route.name == "card" ||
        this.$route.name == "select" ||
        this.$route.name == "dropdown"
      );
    },
    cardElevate() {
      return this.$route.name != "datePicker" && this.$route.name != "card";
    },
  },
  components: {
    slideTransition,
  },
  methods: {
    openedCodeClick() {
      this.openedCode = !this.openedCode;
    },
    copyCodeClick() {
      const codeText =
        this.$refs.codeContent && this.$refs.codeContent.textContent;
      this.$copyText(codeText).then(
        () => {
          this.$message.success("copy success~");
        },
        () => {
          this.$message.error("copy error!");
        }
      );
    },
  },
};
</script>
